<html>
<head>
    <title>修改密码</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="../../static/react/react.development.js" type="text/javascript"></script>
    <script src="../../static/react/react-dom.development.js" type="text/javascript"></script>
    <script src="../../static/react/moment-with-locales.min.js" type="text/javascript"></script>
    <script src="../../static/react/babel.min.js" type="text/javascript"></script>
    <!-- antd -->
    <link href="../../static/react/antd/antd.min.css" rel="stylesheet" type="text/css" />
    <script src="../../static/react/antd/antd-with-locales.min.js" type="text/javascript"></script>
    <!-- axios -->
    <script src="../../static/react/axios.min.js" type="text/javascript"></script>
    <script src="../../static/react/qs.js" type="text/javascript"></script>
    <script src="../../static/react/lodash.min.js" type="text/javascript"></script>
    <script src="../../static/react/request.js" type="text/javascript"></script>
    <script src="../../ffres/dict/all.js" type="text/javascript"></script>
    <link href="../../static/react/common.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div id="app"> </div>
    <script type="text/babel">
    // 请求后台相对路径
    const baseURL = "../../"
    // ant design 组件别名引用
    const { Row, Col, Form, Input, Select, DatePicker, Button, Table, Modal, message } = antd
    // 业务组件 
    class App extends React.Component {
        constructor(props){
            super(props)
            // 在构造器中获取引用实例
            this.formRef = React.createRef()
            this.cancel = this.cancel.bind(this)
            this.submit = this.submit.bind(this)
            this.state = {
                loading: false
            }
        }
        cancel() {

        }
        submit() {
            const self = this
            self.setState({
                loading: true
            })
            self.formRef.current.validateFields().then(function(values){
                API.request({
                    baseURL: baseURL,
                    method: "post",
                    url: "api/account/modifyUserPwd",
                    data: values
                }).then(function(data){
                    self.setState({loading: false, show: false});
                    if (data.code == '0') {
                        message.success("密码修改成功！");
                        window.parent.closeModel && window.parent.closeModel()
                    } else {
                        message.warning(data.message)
                    }
                }).catch(function(error){
                    message.warning("密码修改失败！");
                    self.setState({loading: false});
                })
            }).catch(function(){
                self.setState({
                    loading: false
                })
            })
        }
        componentDidMount() {
            this.formRef.current.resetFields()
        }
        render() {
            return (
                <div style={{padding: "15px"}}>
                    {/* ref 创建 Form 实例的引用 */}
                    <Form ref={this.formRef} labelCol={{ span: 8 }} wrapperCol={{ span: 10 }}>
                        <Form.Item label="原密码" name="password"  rules={[{ required: true, message: "原密码" }]}>
                            <Input.Password />
                        </Form.Item>
                        <Form.Item label="新密码" name="newPassword"  rules={[{ required: true, message: "请输入新密码" }]}>
                            <Input.Password />
                        </Form.Item>
                        <Form.Item label="确认密码" name="confirmPassword"  
                            rules={[
                                { required: true, message: "请输入确认密码" },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('newPassword') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject('两次输入的密码不一致！');
                                    },
                                })
                            ]}>
                            <Input.Password />
                        </Form.Item>
                    </Form>
                    <div className="text-center">
                        <Button type="primary" onClick={this.submit} loading={this.state.loading}>保存</Button>
                    </div>
                </div>
            )
        }
    }
    ReactDOM.render(
        <antd.ConfigProvider locale={antd.locales.zh_CN}>
            <App />
        </antd.ConfigProvider>,
        document.getElementById('app')
    );
    </script>
</body>
</html>